import { defineComponent, watch, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 配置项
    let options = {}

    // 监听
    watch(
      () => props.cdata,
      (val: any) => {
        options = {
            series: [
              {
                type: 'gauge',
                startAngle: 180,
                endAngle: 360,
                pointer: {
                  show: false
                },
                progress: {
                  show: true,
                  overlap: false,
                  roundCap: true,
                  clip: false,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: '#464646'
                  }
                },
                axisLine: {
                  lineStyle: {
                    width: 40
                  }
                },
                splitLine: {
                  show: false,
                  distance: 0,
                  length: 10
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false,
                  distance: 50
                },
                data: val.rateData,
                title: {
                  fontSize: 14
                },
                detail: {
                  width: 50,
                  height: 14,
                  fontSize: 14,
                  color: 'inherit',
                  borderColor: 'inherit',
                  borderRadius: 20,
                  borderWidth: 1,
                  formatter: '{value}%'
                }
              }
            ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "450px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} height={height} width={width} />
      </div>
    }
  }
})

